<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明式渲染</title>
</head>
<script src="./vue1111.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
<body>
    <div id="app">
        {{ abc }}
    </div>
    <div>
        <span>1111</span>
        <span>111111</span>
    </div>
    <div></div>
    <div>

    </div>
    <div id="app2">
         <span :title='message'>
             鼠标悬浮此处显示加载时间
         </span>
    </div>

    <div id="app3">
       <span v-if='seen'>
           {{ message3 }}
       </span>
    </div>

    <div id="app4">
       <ol>
           <li v-for='todo in todos'>
              {{ todo.text }}
           </li>
       </ol>
    </div>

    <div id="app5">
      {{ message }}
      <button v-on:click='reserveMessage'>翻转消息</button>
    </div>

    <div id="app6">
       <p>{{message6}}</p>
       <input  v-model='message6'>
    </div>
</body>

<script>
    var aaa = new Vue({
        el:'#app',
        data:{
            abc:'你好'
        }
    });

    var bbb = new Vue({
        el:'#app2',
        data:{
            message:'页面加载于' + new Date().toLocaleString()
        }
    });

    var ccc  = new Vue({
        el:'#app3',
        data:{
            message3:'现在你看到我囖',
            seen:true
        },
    });

    var ddd = new Vue({
        el:'#app4',
        data:{
            todos:[
                {text: '我是'},
                {text:'宋起宗'},
                {text:'哈哈哈'}
            ]
        }
    });

    var eee = new Vue({
        el:'#app5',
        data:{
            message:'hello world!'
        },
        methods:{
            reserveMessage: function(){
                this.message= this.message.split('').reverse().join('')
            }
        }
    });
    
    var fff = new Vue({
        el:'#app6',
        data:{
            message6:"1111"
        }
    })
</script> 
</html>